<template>
  <div class="formBox">
    <el-form ref="formRef" :model="formData" :rules="rules"
             label-width="80px" size="large" status-icon>
      <el-form-item label="输入密码" prop="password1">
        <el-input v-model.trim="formData.password1" show-password show-word-limit
                  type="password" maxlength="32"
                  minlength="4" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="确认密码" prop="password2">
        <el-input v-model.trim="formData.password2" show-password show-word-limit
                  type="password" maxlength="32"
                  minlength="4" autocomplete="off"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit(formRef)" :disabled="editBtn.disabled">{{editBtn.name}}</el-button>
        <el-button type="info" @click="reset(formRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {reactive, ref} from "vue";
import {useStore} from "vuex";
import {ElMessage} from "element-plus";

export default {
  name: "ModifyPassword",
  setup() {
    const formData = ref({
      password1: '',
      password2: ''
    });
    const formRef = ref();
    const validatePass1 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空'));
      } else if (value.length<4||value.length>32) {
        callback(new Error('密码长度在4到32个字符之间'));
      } else if(!/^[0-9a-zA-Z@#$%^&*]+$/.test(value)){
        callback(new Error('密码只能由数字、大小写字母及特殊字符(@#$%^&*)组成'));
      }else if(formData.value.password2!==''&&value!==formData.value.password2){
        callback(new Error('两次输入密码不一致'));
      }else{
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空'));
      } else if (value.length<4||value.length>32) {
        callback(new Error('密码长度在4到32个字符之间'));
      } else if(!/^[0-9a-zA-Z@#$%^&*]+$/.test(value)){
        callback(new Error('密码只能由数字、大小写字母及特殊字符(@#$%^&*)组成'));
      }else if(formData.value.password1!==''&&value!==formData.value.password1){
        callback(new Error('两次输入密码不一致'));
      }else{
        callback();
      }
    };
    const rules=reactive({
      password1:[{validator:validatePass1,trigger:'blur'}],
      password2:[{validator:validatePass2,trigger:'blur'}],
    })
    const store=useStore();
    const submit=(formInstance)=>{
      if(!formInstance) return;
      formInstance.validate((valid)=>{
        if (valid) {
          store.commit('modifyPassword',formData.value.password1);
          ElMessage.success('密码修改成功');
          setEditBtnDisabledTime(10);
        } else {
          ElMessage.error('密码修改失败');
        }
      })
    };
    const reset=(formInstance)=>{
      if(!formInstance) return;
      formInstance.resetFields();
    }
    const editBtn=ref({
      default:'修改',
      name:'修改',
      disabled:false
    });
    const setEditBtnDisabledTime=(time)=>{
      editBtn.value.name=time;
      editBtn.value.disabled=true;
      const timer=setInterval(()=>{
        --editBtn.value.name;
        if(editBtn.value.name<0){
          editBtn.value.name=editBtn.value.default;
          editBtn.value.disabled=false;
          clearInterval(timer);
        }
      },1000);
    }
    return {
      formData,
      formRef,
      submit,
      rules,
      reset,
      editBtn
    }
  }
}
</script>

<style scoped>
.formBox{
  padding-top: 100px;
  padding-left: 10px;
  padding-right: 20px;
}
:deep(.el-form-item--large){
  margin-bottom: 40px !important;
}
:deep(.el-button:not(:first-child)){
    margin-left: 40px !important;
}
:deep(.el-button--primary){
  width: 68px !important;
}
</style>
